<template>
  <!-- 中间 -->
  <div class="g-bd">
    <!-- 头头 -->
    <div class="g-wrap">
      <input type="text" v-model="keywords" @keyup.enter="CloudSearch()" />
      <button class="sousuo">
        <SvgIcon
          icon="icon-sousuo"
          class="icon"
          @click="CloudSearch()"
        ></SvgIcon>
      </button>
    </div>
    <!-- 提示搜索的是啥 -->
    <div class="sNote">
      <!-- 搜索'{{ keywords }}'，找到{{ result.songs.length }}首单曲 -->
      搜索'{{ keywords }}'，找到20首单曲
    </div>

    <!-- 展示找到的内容 -->
    <ul class="m-tabs">
      <li
        :class="{ active: curClick === index }"
        v-for="(item, index) in navItem"
        :key="index"
        @click="addClass(index)"
      >
        {{ item }}
      </li>
    </ul>

    <!-- 展示区 :prop="xx"-->
    <div class="srchRst">
      <component :is="arr[curClick]" :res="result"></component>
    </div>
  </div>
</template>
<!-- 点击的时候会改变样式 然后我点了没反应 新样式是那个active -->
<script lang="ts">
export default {
  name: 'Search',
}
</script>

<script lang="ts" setup>
import { ref, reactive, watch, onMounted } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useRoute, useRouter } from 'vue-router'
// 组件
import single from './components/Single/index.vue'
import Album from './components/Album/index.vue'
import Lyric from './components/Lyric/index.vue'
import Singer from './components/Singer/index.vue'
import User from './components/User/index.vue'
import Video from './components/Video/index.vue'
import songSheet from './components/songSheet/index.vue'
import voiceAnchor from './components/voiceAnchor/index.vue'
import Foot from '@/components/foot/index.vue'
// 请求
import { getCloudSearchApi } from '@/api/search'

let arr = [single, Singer, Album, Video, Lyric, songSheet, voiceAnchor, User]
const router = useRouter()
const route = useRoute()
const curClick = ref(0)
const navItem = ref([
  '单曲',
  '歌手',
  '专辑',
  '视频',
  '歌词',
  '歌单',
  '声音主播',
  '用户',
])
// console.log(route.params.keywords);
// console.log(route.query);

const keywords = ref()
console.log(keywords)

// 点击切换
function addClass(ind: number) {
  // ind 是下标
  // 点击对应value值
  curClick.value = ind
  // 动态组件切换

  // console.log(componentName.value);
  // const value = componentName.value;

  // 请求
  // const CloudSearch = (keywords: string) => {
  //   getCloudSearchApi(keywords);
  // };
  // console.log(CloudSearch);
}

// console.log(route.params);

// router[index].path
const result = ref()
const CloudSearch = async () => {
  const res = await getCloudSearchApi(keywords.value)
  console.log(res.result)
  result.value = res.result.songs
  // result = result.songList;
}

onMounted(async () => {
  console.log(route.query.keywords)
  let res = await getCloudSearchApi(route.query.keywords as any)
  result.value = res.result.songs
})
</script>

<style scoped>
.g-bd {
  height: 1008px;
  width: 980px;
  margin: 0 auto;
  background-color: #fff;
  padding: 40px;
  color: #333;
  overflow: hidden;
}
.g-wrap {
  width: 420px;
  height: 40px;
  margin: 0 auto;
  /* z-index: 10; */
  border: 1px solid #555;
  border-radius: 5px;
}

.g-wrap input {
  float: left;
  width: 320px;
  height: 17px;
  margin: 12px 0 0 20px;
  padding: 0;
  background: #fff;
  border: none;
}

.sousuo {
  float: right;
  width: 50px;
  height: 40px;
  margin: -1px;
  cursor: pointer;
}

.sousuo .icon {
  width: 20px;
  height: 20px;
}

.sNote {
  font-size: 12px;
  color: #333;
  margin: 28px auto 17px;
}

.m-tabs {
  background-color: #f9f9f9;
  box-sizing: border-box;
  display: flex;
  /* flex-wrap: nowrap;
  flex-direction: row;
  align-content: space-between;
  justify-content: space-around; */
  /* border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc; */
}

.m-tabs li {
  font-size: 14px;
  height: 37px;
  width: 134px;
  padding: 2px 2px 0 0;
  line-height: 37px;
  cursor: pointer;
  text-align: center;

  border-top: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.m-tabs li:hover {
  box-sizing: border-box;
  border-top: 3px solid #d13030;
}

.active {
  border-top: 3px solid #d13030 !important;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: none !important;
  background-color: #fff;
}

.srchRst {
  width: 965px;
  height: 827px;
  font-size: 12px;
  /* color: #d13030; */
  margin-top: 20px;
  overflow: scroll;
}
</style>
